<template lang="">
  <div class="square">
    <div class="search">
      <t-input
        placeholder="请搜索你想要的模板 "
        style="width: 720px; margin: 16px 19px 0px 32px"
        v-model="assessvodata.name"
        @input="inp()"
        size="large"
      />
      <img class="search-img"  @click="search()" src="../../static/images/sousuo.png" alt="" />
      <div class="history">
        <ul>
          <li style="cursor: pointer" @click="search()">搜索</li>
        </ul>
      </div>
    </div>
    <div class="select">
      <ul>
        <span>行业：</span>
        <li
          :class="index === n ? 'active' : ''"
          v-for="(item, index) in navdata.hangye"
          :key="index"
          @click="clicknav(index, navdata.hangye, 'n', 'industry')"
        >
          {{ item }}
        </li>
      </ul>
      <ul>
        <span>主题：</span>
        <li
          :class="index === a ? 'active' : ''"
          v-for="(item, index) in navdata.zhuti"
          :key="index"
          @click="clicknav(index, navdata.zhuti, 'a', 'theme')"
        >
          {{ item }}
        </li>
      </ul>
      <ul>
        <span>类型：</span>
        <li
          :class="index === y ? 'active' : ''"
          v-for="(item, index) in navdata.leixing"
          :key="index"
          @click="clicknav(index, navdata.leixing, 'y', 'versions')"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="project">
      <evaluating
        v-for="item of datalist"
        :frdata="item"
        @reactePorjectBulletbox="reactePorjectBulletbox(item)"
      />
    </div>
    <div class="add-project-modal">
      <!-- <t-button @click="addProjectModalvisible = true">添加项目</t-button> -->
      <t-dialog
        :width="1000"
        header="创建项目"
        :visible.sync="addProjectModalvisible"
        :cancelBtn="null"
        :onCloseBtnClick="handleCloseAddProjectModal"
        :confirmBtn="true"
      >
        <div class="content-container">
          <div class="step-container">
            <t-steps
              :readonly="true"
              :current="formStep"
              :onChange="handleStepChange"
            >
              <t-step-item title="第一步:项目信息" :value="1" />
              <t-step-item title="第二步:适用范围" :value="2" />
              <t-step-item title="第三步:关联服务" :value="3" />
              <t-step-item title="第四步:发布设置" :value="4" />
            </t-steps>
          </div>
          <div class="form-container">
            <div>
              <t-form
                v-show="formStep === 1"
                ref="form"
                :rules="rules"
                :data="datainput"
              >
                <t-form-item label="项目名称" name="title">
                  <t-input
                    placeholder="请输入项目名称"
                    v-model="datainput.title"
                  />
                </t-form-item>
                <t-form-item label="项目简介" name="comment">
                  <t-textarea
                    v-model="datainput.comment"
                    placeholder="请输入项目简介"
                  ></t-textarea>
                </t-form-item>
                <t-form-item label="项目详情" name="intro">
                  <t-textarea
                    v-model="datainput.intro"
                    placeholder="请输入项目详情"
                  ></t-textarea>
                </t-form-item>
                <t-form-item label="封面图" name="logo">
                  <t-upload
                    action="/dc/file/upload"
                    v-model="logo"
                    :headers="header"
                    theme="image"
                    tips="请选择单张图片文件上传"
                    accept="image/*"
                  ></t-upload>
                </t-form-item>
              </t-form>

              <t-form v-show="formStep === 2">
                <t-form-item label="参与人员" name="course" initialData="['1']">
                  <t-radio-group v-model="datainput.zzjg" @Change="radio1">
                    <t-radio value="1">按员工</t-radio>
                    <t-radio value="2">按组织</t-radio>
                  </t-radio-group>
                </t-form-item>
                <t-form-item
                  label="组织架构"
                  name="parentOrgName"
                  v-if="zzhsyg"
                >
                  <!-- <t-cascader
                    v-model="formData.parentOrgName"
                    :options="zjlist"
                    clearable
                    @change="onChange1"
                  /> -->
                  <t-tree-select
                    :data="zjlist"
                    @change="onChange1"
                    placeholder="请选择"
                  />
                </t-form-item>
                <t-form-item label="选择员工" name="college" v-if="!zzhsyg">
                  <t-select
                    @focus="handleEmployeeSelectFocus"
                    v-model="formData.college"
                    class="demo-select-base"
                    clearable
                    filterable
                    placeholder="请选择员工"
                  >
                    <t-option
                      v-for="(item, index) in options"
                      :value="item.value"
                      :label="item.label"
                      :key="index"
                    >
                      {{ item.label }}
                    </t-option>
                  </t-select>
                </t-form-item>

                <div style="margin-bottom: 10px" v-if="tableVisible">
                  总共选择{{ data.length }}名员工
                </div>
                <t-table
                  title="选择员工"
                  v-if="tableVisible"
                  :pagination="selectedTablePagination"
                  rowKey="index"
                  :data="data"
                  :footData="[{}]"
                  :columns="columns"
                  bordered
                >
                  <template #operation="{ row }">
                    <t-link theme="primary" hover="color" @click="delt(row)">
                      删除
                    </t-link>
                  </template>
                </t-table>

                <t-dialog
                  :visible.sync="employeeDialogVisible"
                  width="1050"
                  header="选择员工"
                  :onConfirm="handleConfirmEmployessDialog"
                  :cancelBtn="null"
                  :onCloseBtnClick="handleCloseEmployeeDialog"
                >
                  <div class="top_box">
                    <t-form>
                      <t-form-item
                        label="员工姓名"
                        name="name"
                        initialData="TDesign"
                      >
                        <t-input placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item
                        label="员工编号"
                        name="name"
                        initialData="TDesign"
                      >
                        <t-input placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item
                        label="手机号码"
                        name="name"
                        initialData="TDesign"
                      >
                        <t-input placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item
                        label="按项目选择"
                        name="name"
                        initialData="TDesign"
                      >
                        <t-input placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item
                        label="良性筛出"
                        name="name"
                        initialData="TDesign"
                      >
                        <t-input placeholder="请输入内容" />
                      </t-form-item>
                      <t-form-item
                        label="组织架构"
                        name="name"
                        initialData="TDesign"
                      >
                        <t-input placeholder="请输入内容">
                          <t-input
                            type="password"
                            v-model="formData.password"
                            placeholder="请输入密码"
                          ></t-input>
                        </t-input>
                      </t-form-item>
                      <t-button
                        theme="primary"
                        class="btn"
                        type="submit"
                        style="background-color: rgb(59, 182, 254); border: 0"
                        >查询</t-button
                      >
                      <t-button
                        theme="default"
                        class="btn"
                        variant="base"
                        type="reset"
                        style="
                          color: rgb(59, 182, 254);
                          border: 1px solid rgb(59, 182, 254);
                          background-color: #fff;
                        "
                        >重置</t-button
                      >
                    </t-form>
                  </div>
                  <t-table
                    :pagination="pagination"
                    rowKey="index"
                    :data="employeeData"
                    :footData="[{}]"
                    :columns="employeeColumns"
                    :selected-row-keys="selectedRowKeys"
                    @select-change="rehandleSelectChange"
                    bordered
                  >
                    <template #operation="{ row }">
                      <t-link theme="primary" hover="color"> 查看 </t-link>
                    </template>
                  </t-table>
                </t-dialog>
              </t-form>

              <t-form v-show="formStep === 3">
                <t-form-item label="选择服务" name="course" initialData="['1']">
                  <t-checkbox :checked="chena" @change="chena = !chena"
                    >开启服务</t-checkbox
                  >
                </t-form-item>
                <t-form-item label="测评服务" name="college">
                  <t-select
                    v-model="datainput.lb_ids"
                    class="demo-select-base"
                    clearable
                    filterable
                    :min-collapsed-num="2"
                    multiple
                    placeholder="请选择测评服务"
                    :disabled="!chena"
                  >
                    <t-option
                      v-for="(item, index) in cpdata"
                      :value="item.id"
                      :label="item.name"
                      :key="index"
                    >
                      {{ item.name }}
                    </t-option>
                  </t-select> </t-form-item
                ><t-form-item label="课程服务" name="college">
                  <t-select
                    v-model="datainput.lblession_ids"
                    class="demo-select-base"
                    clearable
                    filterable
                    multiple
                    :min-collapsed-num="2"
                    placeholder="请选择课程服务"
                    :disabled="!chena"
                  >
                    <t-option
                      v-for="(item, index) in kcdata"
                      :value="item.les_id"
                      :label="item.les_name"
                      :key="index"
                    >
                      {{ item.les_name }}
                    </t-option>
                  </t-select> </t-form-item
                ><t-form-item label="咨询服务" name="college">
                  <t-select
                    v-model="formData.college"
                    class="demo-select-base"
                    clearable
                    multiple
                    filterable
                    :min-collapsed-num="2"
                    placeholder="请选择咨询服务"
                    :disabled="!chena"
                  >
                    <t-option
                      v-for="(item, index) in options"
                      :value="item.value"
                      :label="item.label"
                      :key="index"
                    >
                      {{ item.label }}
                    </t-option>
                  </t-select>
                </t-form-item>
                <t-form-item name="course" initialData="['1']">
                  <t-image
                    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                    fit="cover"
                    :style="{ width: '120px', height: '120px' }"
                  />
                </t-form-item>
              </t-form>

              <t-form v-show="formStep === 4">
                <t-form-item label="项目期限" name="name" initialData="TDesign">
                  <t-date-range-picker v-model="riqi" />
                </t-form-item>
                <t-form-item label="项目链接" name="tel" initialData="123456">
                  <t-input-adornment prepend="手机版">
                    <t-input
                      placeholder="https://dc.eapchina.net.cn/"
                      value="https://dc.eapchina.net.cn/"
                      style="width: 330px"
                    />
                  </t-input-adornment>
                </t-form-item>
                <!-- <t-form-item label="项目地址" name="tel" initialData="123456">
                  <t-input-adornment prepend="手机版">
                    <t-input placeholder="https://dc.eapchina.net.cn/" />
                  </t-input-adornment>
                </t-form-item> -->
                <t-form-item label="二维码" name="course" initialData="['1']">
                  <!-- <t-image
                    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
                    fit="cover"
                    :style="{ width: '120px', height: '120px' }"
                  /> -->
                  <div
                    class="qrcode"
                    ref="qrCodeUrl"
                    :style="{ width: '120px', height: '120px' }"
                  ></div>
                </t-form-item>
              </t-form>
            </div>
          </div>
          <div class="step-form-action">
            <t-button @click="handleStepBack" v-if="formStep !== 1"
              >上一步</t-button
            >
            <t-button @click="handleStepGo" v-if="formStep !== 4"
              >下一步</t-button
            >
            <t-button v-if="formStep === 4" @click="bbc"
              >保存,暂不发布</t-button
            >
            <t-button @click="handleStepFormConfirm" v-if="formStep === 4"
              >发布</t-button
            >
          </div>
        </div>
      </t-dialog>
    </div>
  </div>
</template>

<script>
import evaluating from "./components/evaluating.vue";
import {
  zcvotelogList,
  assessList,
  lessionRecommend,
  assessRecommend,
  selectZdmember,
  createAssess,
  getAllUserByOrg,
} from "../../api/square.js";
import { unitOgrListTree } from "../../api/basic.js";
import { MessagePlugin } from "tdesign-vue-next";
import axios from "axios";
import { getToken } from "../../utils/setToken";
import QRCode from "qrcodejs2-fix";
export default {
  components: { evaluating },
  methods: {
    async api() {
      const res = await assessList(this.assessvodata);
      this.datalist = res.data.list;
      const res1 = await lessionRecommend();
      this.kcdata = res1.data;
      const res2 = await assessRecommend();
      const res5 = await unitOgrListTree();
      this.cpdata = res2.data;
      const res3 = await selectZdmember({
        age: "",
        birthday: "",
        city: "",
        department: "",
        email: "",
        gender: "",
        id: "1201932",
        isManager: "",
        memberno: "",
        mobile: "",
        name: "",
        password: "",
        prop15: "",
        regTime: "",
        snum: "",
        status: "",
        subCompany: "",
        unit_ID: "",
        userName: "",
      });
      res3.data.forEach((item, index) => {
        item.index = index;
        item.zc = "正常";
      });
      this.employeeData = res3.data;
      this.pagination.total = this.employeeData.length;
      let arr = [];
      res5.data.forEach((item) => {
        arr.push({
          label: item.orgName,
          value: item.orgName,
          orgName: item.orgName,
          id: item.id,
          parentId: item.parentId,
          parentOrgName: item.parentOrgName,
          unitId: item.unitId,
          orgCreateTime: item.orgCreateTime,
          children: (() => {
            if (item.childrenOrg === undefined) return [];
            let arr2 = [];
            item.childrenOrg.forEach((ite) => {
              arr2.push({
                label: ite.orgName,
                value: ite.orgName,
                orgName: ite.orgName,
                id: ite.id,
                parentId: ite.parentId,
                parentOrgName: ite.parentOrgName,
                unitId: ite.unitId,
                orgCreateTime: ite.orgCreateTime,
                children: (() => {
                  if (ite.childrenOrg === undefined) return [];
                  let arr3 = [];
                  ite.childrenOrg.forEach((it) => {
                    arr3.push({
                      label: it.orgName,
                      value: it.orgName,
                      orgName: it.orgName,
                      id: it.id,
                      parentId: it.parentId,
                      parentOrgName: it.parentOrgName,
                      unitId: it.unitId,
                      orgCreateTime: it.orgCreateTime,
                      children: (() => {
                        if (it.childrenOrg === undefined) return [];
                        let arr4 = [];
                        it.childrenOrg.forEach((i) => {
                          arr4.push({
                            label: i.orgName,
                            value: i.orgName,
                            orgName: i.orgName,
                            id: i.id,
                            parentId: i.parentId,
                            parentOrgName: i.parentOrgName,
                            unitId: i.unitId,
                            orgCreateTime: i.orgCreateTime,
                            children: (() => {
                              if (i.childrenOrg === undefined) return [];
                              let arr5 = [];
                              i.childrenOrg.forEach((ie) => {
                                arr5.push({
                                  label: ie.orgName,
                                  value: ie.orgName,
                                  orgName: ie.orgName,
                                  id: ie.id,
                                  parentId: ie.parentId,
                                  parentOrgName: ie.parentOrgName,
                                  unitId: ie.unitId,
                                  orgCreateTime: ie.orgCreateTime,
                                });
                              });
                              return arr5;
                            })(),
                          });
                        });
                        return arr4;
                      })(),
                    });
                  });
                  return arr3;
                })(),
              });
            });
            return arr2;
          })(),
        });
      });
      this.zjlist = arr;
      console.log(this.zjlist);
    },
    async inp() {
      const res = await assessList(this.assessvodata);
      this.datalist = res.data.list;
    },
    riqijs() {
      // 获取今天的时间
      const today = new Date();

      // 获取未来第30天的时间
      const futureDate = new Date();
      futureDate.setDate(today.getDate() - 90);

      // 将时间格式化为字符串
      const todayStr = today.toISOString().slice(0, 10);
      const futureDateStr = futureDate.toISOString().slice(0, 10);
      // 输出结果
      this.riqi = [futureDateStr, todayStr];
    },
    //搜索
    async search() {
      const res = await assessList(this.assessvodata);
      this.datalist = res.data.list;
    },
    clicknav(index, data1, nn, nav) {
      this[nn] = index;
      if (data1[index] === "全部") return (this.assessvodata[nav] = "");
      this.assessvodata[nav] = data1[index];
    },
    handleCloseAddProjectModal() {
      this.addProjectModalvisible = false;
    },
    handleStepChange(stepVal) {
      this.formStep = stepVal;
    },
    handleStepBack() {
      this.formStep = this.formStep - 1;
    },
    handleStepGo() {
      if (this.formStep === 1) {
        if (
          this.datainput.title === "" ||
          this.datainput.comment === "" ||
          this.datainput.intro === ""
        ) {
          this.$refs.form.validate();
          return;
        }
      }
      this.formStep = this.formStep + 1;
    },
    //不发布按钮
    async bbc() {
      if (this.chena) {
        this.datainput.is_recommend_consultantL = "0";
      } else {
        this.datainput.is_recommend_consultantL = "1";
      }
      this.data.forEach((item) => {
        this.datainput.zdIdList.push(item.id);
      });
      this.datainput.starttime = this.riqi[0] + " 00:00:00";
      this.datainput.endtime = this.riqi[1] + " 00:00:00";
      this.datainput.status = 0;
      this.datainput.logo = this.logo[0].url;
      const res = await createAssess(this.datainput);
      console.log(res);
      if (res.code === 0) {
        this.addProjectModalvisible = false;
        MessagePlugin.success("保存成功");
      }
    },
    //发布按钮
    async handleStepFormConfirm() {
      if (this.zzhsyg) {
        let res1 = await getAllUserByOrg({ orgId: this.paderid });
        this.datainput.zdIdList = res1.data;
      }
      if (this.chena) {
        this.datainput.is_recommend_consultantL = "0";
      } else {
        this.datainput.is_recommend_consultantL = "1";
      }
      this.data.forEach((item) => {
        this.datainput.zdIdList.push(item.id);
      });
      this.datainput.starttime = this.riqi[0] + " 00:00:00";
      this.datainput.endtime = this.riqi[1] + " 00:00:00";
      this.datainput.status = 1;
      this.datainput.logo = this.logo[0].url;
      const res = await createAssess(this.datainput);
      console.log(res);
      if (res.code === 0) {
        this.addProjectModalvisible = false;
        MessagePlugin.success("发布成功");
      }
    },
    //创建项目按钮
    async reactePorjectBulletbox(datav1) {
      this.addProjectModalvisible = true;
      this.data = [];
      this.logo = [];
      this.datainput = {
        zzjg: "1",
        comment: "",
        endtime: "",
        id: "",
        intro: "",
        is_recommend_consultantL: "",
        lb_ids: [],
        lblession_ids: [],
        limit_time: "",
        logo: "",
        starttime: "",
        status: "",
        title: "",
        zcvoteId: "",
        zdIdList: [],
      };
      this.datainput.title = datav1.title;
      this.logo.push({
        name: "demo-image-1.png",
        url: "https://today.eapchina.net/" + datav1.logo,
      });
      this.datainput.logo = this.logo[0].url;
      this.datainput.id = datav1.id;
      this.formStep = 1;
      setTimeout(() => {
        this.$refs.form.clearValidate();
      }, 0);
    },
    //删除人员
    delt(row) {
      this.data.forEach((item, index) => {
        if (item.index === row.index) {
          this.data.splice(index, 1);
          this.datainput.zdIdList.splice(index, 1);
        }
      });
    },
    //单选事件
    radio1(ev) {
      if (ev === "1") {
        //人员

        this.zzhsyg = false;
      } else {
        //组织
        this.zzhsyg = true;
        this.tableVisible = false;
      }
    },
    //
    onChange1(e, i) {
      this.paderid = i.node.data.id;
    },
    handleEmployeeSelectFocus() {
      this.employeeDialogVisible = true;
    },
    handleCloseEmployeeDialog() {
      this.employeeDialogVisible = false;
    },
    handleConfirmEmployessDialog() {
      this.employeeDialogVisible = false;
      this.tableVisible = true;
    },
    rehandleSelectChange(value, { selectedRowData }) {
      this.selectedRowKeys = value;
      this.data = selectedRowData;
      console.log(this.selectedRowKeys, selectedRowData);
    },
    //二维码
    creatQrCode() {
      this.$nextTick(() => {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: "https://dc.eapchina.net.cn/", // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
  },
  created() {
    this.api();
    this.riqijs();
    this.creatQrCode();
  },
  data() {
    return {
      zzhsyg: false,
      addProjectModalvisible: false,
      formStep: 1,
      formData: {},
      zjlist: [],
      cpdata: [],
      kcdata: [],
      tableVisible: false,
      employeeDialogVisible: false,
      selectedRowKeys: [],
      riqi: [],
      logo: [],
      rules: {
        title: [{ required: true, message: "请填写项目名称" }],
        comment: [{ required: true, message: "请填写项目简介" }],
        intro: [{ required: true, message: "请填写项目详细" }],
        logo: [{ required: true, message: "请上传封面图" }],
      },
      chena: true,
      header: { token: getToken("token") },
      n: 0,
      a: 0,
      y: 0,
      navdata: {
        hangye: [
          "全部",
          "互联网",
          "汽车",
          "金融",
          "文化娱乐",
          "教育",
          "农业牧鱼",
          "医药卫生",
          "建筑建材",
          "治金矿产",
          "石油化工",
          "水利水电",
        ],
        zhuti: ["全部", "抑郁", "焦虑", "睡眠", "心里风险", "职场"],
        leixing: ["全部", "个人", "企业"],
      },
      datalist: [],
      datainput: {
        zzjg: "1",
        comment: "",
        endtime: "",
        id: "",
        intro: "",
        paderid: "",
        is_recommend_consultantL: "",
        lb_ids: [],
        lblession_ids: [],
        limit_time: "",
        logo: "",
        starttime: "",
        status: "",
        title: "",
        zcvoteId: "",
        zdIdList: [],
      },
      assessvodata: {
        industry: "",
        name: "",
        theme: "",
        versions: "",
        pageNo: 0,
        pageSiz: 0,
      },
      data: [
        {
          index: 0,
          no: "001",
          name: "李磊",
          phone: "15023903870",
          team: "客服部",
          status: "正常",
        },
        {
          index: 1,
          no: "002",
          name: "李磊2",
          phone: "15023903870",
          team: "客服部",
          status: "正常",
        },
      ],
      employeeData: [
        {
          index: 0,
          no: "001",
          name: "李磊",
          phone: "15023903870",
          team: "客服部",
          status: "正常",
        },
        {
          index: 1,
          no: "002",
          name: "李磊2",
          phone: "15023903870",
          team: "客服部",
          status: "正常",
        },
      ],

      employeeColumns: [
        {
          colKey: "row-select",
          type: "multiple",
          width: "100",
        },
        { colKey: "name", title: "姓名", width: "100" },
        { colKey: "mobile", title: "手机号码", width: "100" },
        { colKey: "prop15", title: "所属组织", width: "100" },
        { colKey: "zc", title: "阳性筛出", width: "100" },
        {
          colKey: "operation",
          title: "曾参与项目",
          width: 150,
        },
      ],

      columns: [
        { colKey: "name", title: "姓名", width: "100" },
        { colKey: "prop15", title: "部门", width: "100" },
        // { colKey: "name", title: "编号", width: "100" },
        { colKey: "mobile", title: "手机号码", width: "100" },
        { colKey: "zc", title: "健康状态", width: "100" },
        {
          colKey: "operation",
          title: "操作",
          width: 150,
        },
      ],
      selectedTablePagination: {
        current: 1,
        pageSize: 5,
        showJumper: false,
        showPageNumber: true,
        showPageSize: false,
        totalContent: false,
        total: 2,
        showPreviousAndNextBtn: false,
        onChange: (pageInfo) => {
          this.pagination.current = pageInfo.current;
          this.pagination.pageSize = pageInfo.pageSize;
        },
      },
      pagination: {
        current: 1,
        pageSize: 5,
        total: 2,
        // defaultCurrent: 1,
        // defaultPageSize: 10,
        showJumper: false,
        onChange: (pageInfo) => {
          this.pagination.current = pageInfo.current;
          this.pagination.pageSize = pageInfo.pageSize;
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.square {
  background-color: rgb(241, 245, 248);
  padding: 15px 0 40px 40px;
  // 搜索框
  .search {
    background-color: #fff;
    display: flex;
    font-size: 14px;

    .history {
      display: flex;
      line-height: 38px;
      color: #d6d6d6;
      margin-top: 16px;
    }

    ul {
      list-style-type: none;
      display: flex;
      gap: 10px;
      line-height: 38px;
      color: #7b8c95;
    }
    .search-img {
      width: 30px;
      height: 30px;
      position: relative;
      left: -60px;
      top: 24px;
      z-index: 999;
    }
  }
  .select {
    padding: 16px 16px 1px 32px;
    background-color: #fff;
    margin-bottom: 15px;
    ul {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      color: #7b8c95;
      line-height: 32px;
      gap: 10px;
      margin-bottom: 16px;

      li {
        font-size: 14px;
        font-weight: 400;
        color: #000025;
        padding: 0px 5px;
        border-radius: 5px;
      }
      li:hover {
        background-color: rgb(117, 177, 247);
        color: #fff;

        cursor: pointer;
      }
      .active {
        background-color: rgb(117, 177, 247);
        color: #fff;
      }
    }
  }

  .project {
    width: 100%;
    background-color: #fff;
    padding: 32px;
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
  }
}

.content-container {
  padding: 10px 30px 0px 30px;
}

.step-form-action {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.form-container {
  padding: 20px 0px;
}

.t-pagination__select {
  display: none;
}

.t-pagination__total {
  display: none;
}

.top_box {
  width: 100%;
  margin-top: 15px;
  // margin-left: 15px;
  border-radius: 15px;
  padding-bottom: 20px;
  padding-top: 20px;
  background-color: #fff;
  .t-form__item {
    display: inline-block;
  }
  .t-form__controls-content {
    width: 200px;
  }
  .btn {
    margin-left: 20px;
  }
  .tdesign-demo-dropdown {
    &__text {
      display: inline-flex;
      align-items: center;
      .t-icon {
        margin-left: 8px;
      }
    }
  }
}

:deep(.t-checkbox) {
  margin: 0;
}
</style>
